<!--
 * @Description: 人员旅馆信息
 * @Author: 丁飞洋
 * @Date: 2025-09-10 14:20:52
 * @LastEditTime: 2025-10-13 15:50:27
 * @LastEditors: 丁飞洋
-->
<template>
  <BaseNode>
    <div class="abnormalAccommodation">
      <div class="box">
        <div class="right">
          <div class="img"> <a-image style="width: 110px;height:128px;" :src="img" /> </div>
          <div class="text">{{ imgId }}</div>
        </div>
        <div class="left">
          <a-table :data-source="dataSource" :columns="columns" size="small" :pagination="pagination"
            :loading="loading">
          </a-table>
          <!-- <div style="margin-top: 8px;display: flex;justify-content: flex-end;">
            <a-pagination v-model:current="pagination.current" :total="pagination.total"
              @current-change="handleCurrentChange" show-less-items />
          </div> -->
        </div>
      </div>
    </div>
  </BaseNode>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getYCZSList, getRxImg } from '@/api/ZAApi.js'
import { message } from 'ant-design-vue';
import BaseNode from '../Node/BaseNode.vue'
const { node } = ref({})



// 首次加载
onMounted(() => {
  sfzh.value = node.data.idCard
  fetchData()
  // getImageData()
})
const imgId = ref("")
// 加载
const loading = ref(false)
// 人像
const img = ref("")
// 证件号码
const sfzh = ref("")
// 列表数据
const dataSource = ref([

])
// 列表表头
const columns = ref([
  {
    title: '酒店名称',
    dataIndex: 'jdmc',
    ellipsis: true,
    width: 'auto',
  }, {
    title: '入店时间',
    dataIndex: 'rzsj',
    width: 'auto',
  }, {
    title: '离店时间',
    dataIndex: 'ldsj',
    width: 'auto',
  },
])
const pagination = {
  pageSize: 5,
  showSizeChanger: false  // 关闭分页大小选择器
}
// 分页数据
// const pagination = ref({
//   current: 1,
//   pageSize: 5,
//   total: 0,
// })
// 分页改变
// const handleCurrentChange = (newPage) => {
//   pagination.current = newPage
//   fetchData()
// }
// 请求列表数据
const fetchData = async () => {
  const params = {
    gmsfzhm: sfzh.value,
    pageNo: 1,
    pageSize: 99
  };

  loading.value = true;
  getYCZSList(params).then((res) => {
    loading.value = false;
    if (res.code == 200) {
      dataSource.value = res.result.records;
      imgId.value = dataSource.value[0].rzsfzhm.split(',')[1]
      getImageData(imgId.value)
      // pagination.total = res.result.total
    } else {
      message.error(res.msg);
    }
  }).catch((err) => {
    loading.value = false;
    message.error(err);
  });
}
// 请求人员图片
const getImageData = async (id) => {
  const res = await getRxImg({ gmsfzhm: id })
  img.value = "data:image/png;base64," + res.result
}
</script>

<style scoped>
.abnormalAccommodation {
  min-height: 260px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  /* border: 1px solid #e5e7eb; */
  padding: 10px 24px;
  overflow-y: auto;
}

.box {
  width: 100%;
  display: flex;
}

.right {
  width: 120px;
  margin-right: 16px;
}

.left {
  flex: 1;
}

.img {
  width: 110px;
  height: 128px;
  padding-left: 5px;
}

.text {
  font-size: 12px;
  color: #1677ff;
}
</style>
